<template>
    <div class="r-container">
        <!-- 功能描述 -->
        <div class="hand">
            <div class="hand-title">
                <h2>
                    <icon name="job"></icon>
                    企业招聘
                </h2>
            </div>
            <div class="breadcrumb">
                <i class="moe-icon moe-icon-map-marker"></i>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{path: '/'}">我的控制台</el-breadcrumb-item>
                    <el-breadcrumb-item>企业管理</el-breadcrumb-item>
                    <el-breadcrumb-item>企业招聘</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!-- 内容 -->
        <div class="container">
            <div class="block block-rounded">
                <div class="block-content">
                    <!-- 选项 -->
                    <div class="block-option">
                        <el-row>
                            <el-col :span="8">
                                <el-input v-model="search.keyword"
                                          size="medium"
                                          class="input-with-select"
                                          placeholder="职位名称/公司名称"
                                          clearable
                                          :disabled="operate.searchLoading"
                                          @keyup.enter.native="handleSearch">
                                    <el-select v-model="search.keyword_type"
                                               slot="prepend"
                                               placeholder="职位名称"
                                               style="width: 105px;">
                                        <el-option label="职位名称" value=""></el-option>
                                        <el-option label="公司名称" value="company_name"></el-option>
                                    </el-select>
                                    <el-button slot="append"
                                               icon="el-icon-search"
                                               :loading="operate.searchLoading"
                                               @click="handleSearch">搜索
                                    </el-button>
                                </el-input>
                            </el-col>
                            <el-col :span="16" class="text-right">
                                <el-button-group>
                                    <el-button type="primary"
                                               size="medium"
                                               icon="el-icon-refresh"
                                               :loading="operate.loading"
                                               @click="handleReload">重新载入
                                    </el-button>
                                    <el-button type="danger"
                                               size="medium"
                                               :loading="operate.loading"
                                               :disabled="ids.length === 0"
                                               @click="handleReload">
                                        <icon name="cancel-audit"></icon>
                                        待审
                                    </el-button>
                                </el-button-group>
                            </el-col>
                        </el-row>
                        <div class="r-flex mt-10">
                            <div class="r-flex__item">
                                <!-- 类型 -->
                                <el-select v-model="params.date_type"
                                           placeholder="类型"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 80px;">
                                    <el-option label="创建" value="create"></el-option>
                                    <el-option label="更新" value="update"></el-option>
                                </el-select>
                                <!-- 日期类型 -->
                                <el-select v-model="params.date_type_value"
                                           size="medium"
                                           placeholder="日期"
                                           clearable
                                           class="mr-10"
                                           style="width: 80px;"
                                           :disabled="isEmpty(params.date_type)">
                                    <el-option v-for="item in pickerDate.dateTypeOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                                <!-- 日期 -->
                                <el-date-picker range-separator="-"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                size="medium"
                                                class="mr-10"
                                                style="width: 300px;"
                                                clearable
                                                v-model="params.date_value"
                                                :type="params.date_type_value || 'daterange'"
                                                :picker-options="pickerDate.dateOptions"
                                                :disabled="isEmpty(params.date_type) || isEmpty(params.date_type_value)">
                                </el-date-picker>
                                <!-- 类型 -->
                                <el-select v-model="params.part_status"
                                           placeholder="招聘"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 80px;"
                                           @change="handleQuery">
                                    <el-option label="全职" :value="1"></el-option>
                                    <el-option label="实习" :value="2"></el-option>
                                    <el-option label="兼职" :value="3"></el-option>
                                    <el-option label="临时" :value="4"></el-option>
                                </el-select>
                                <!-- 会员级别 -->
                                <el-select v-model="params.vip_level"
                                           placeholder="会员级别"
                                           size="medium"
                                           clearable
                                           multiple
                                           collapse-tags
                                           class="mr-10"
                                           style="width: 170px;"
                                           @change="handleQuery">
                                    <el-option label="普通会员" :value="0"></el-option>
                                    <el-option label="认证会员" :value="1"></el-option>
                                    <el-option label="推荐会员" :value="2"></el-option>
                                    <el-option label="品牌会员" :value="3"></el-option>
                                </el-select>
                            </div>
                            <div>
                                <strong class="font-s16 text-bold">结果：{{ total || 0 }}</strong>
                            </div>
                        </div>
                    </div>
                    <!-- 列表 -->
                    <el-table ref="dataList"
                              row-key="id"
                              size="medium"
                              highlight-current-row
                              :stripe="true"
                              :data="companyJobs"
                              :empty-text="table.emptyText"
                              v-loading="table.loading"
                              :element-loading-text="table.loadText"
                              :element-loading-background="table.backgroundColor"
                              @selection-change="handleSelectionChange">
                        <el-table-column fixed type="selection" width="42" align="center"></el-table-column>
                        <el-table-column label="ID" fixed="left" prop="id" width="80">
                            <template slot-scope="item">
                                <strong class="text-black">{{ item.row.id }}</strong>
                            </template>
                        </el-table-column>
                        <el-table-column label="职位名称" prop="company_name" width="250" :show-overflow-tooltip="true">
                            <template slot-scope="item">
                                <div class="text-hide">
                                    <icon v-show="item.row.type.value > 0"
                                          :name="item.row.type.icon"
                                          class="font-s16"
                                          :class="`text-${item.row.type.style}`"></icon>
                                    <a class="text-primary text-bold text-hide"
                                       target="_blank"
                                       :href="item.row.link_url">
                                        {{ item.row.job_title }}
                                    </a>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="账户名" prop="user.account" width="120" :show-overflow-tooltip="true">
                            <template slot-scope="item">
                                <div class="text-hide"
                                     :class="{'text-info-light': !item.row.user.account}">
                                    {{ item.row.user.account || '无' }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="公司名称" prop="company_name" width="200" :show-overflow-tooltip="true">
                            <template slot-scope="item">
                                <a class="text-black text-bold text-hide"
                                   target="_blank"
                                   :href="item.row.basic.link_url">
                                    <div class="text-hide">{{ item.row.basic.company_name }}</div>
                                </a>
                            </template>
                        </el-table-column>
                        <el-table-column label="联系人/电话" width="170" :show-overflow-tooltip="true">
                            <template slot-scope="item">
                                <div class="text-hide">
                                    {{ item.row.contact.contacts }}/{{ item.row.contact.phone }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="created_at" width="160"></el-table-column>
                        <el-table-column label="更新时间" prop="updated_at" width="160"></el-table-column>
                        <el-table-column label="浏览量" prop="page_views"></el-table-column>
                        <el-table-column label="会员" width="90" align="center" fixed="right">
                            <template slot="header">
                                会员
                                <el-popover placement="top" trigger="hover" content="红点：表示会员已到期">
                                    <icon slot="reference" name="ask-fill" class="text-info-light"></icon>
                                </el-popover>
                            </template>
                            <template slot-scope="item">
                                <el-badge v-if="!item.row.user.is_vip && item.row.user.vip.level > 0"
                                          is-dot>
                                    <el-tag size="small"
                                            :type="item.row.user.vip.level === 0 ? 'info' : `v${item.row.user.vip.level}`">
                                        {{ item.row.user.vip.name }}
                                    </el-tag>
                                </el-badge>
                                <el-tag v-else
                                        size="small"
                                        :type="item.row.user.vip.level === 0 ? 'info' : `v${item.row.user.vip.level}`">
                                    {{ item.row.user.vip.name }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="审核" fixed="right" width="70" align="center">
                            <template slot-scope="item">
                                <el-tag size="small"
                                        effect="dark"
                                        :type="item.row.audit_status.style">
                                    {{ item.row.audit_status.label_simple }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="90" fixed="right">
                            <template slot="header">
                                操作
                                <el-popover placement="left" trigger="hover">
                                    <div>
                                        <div><el-tag size="mini"><icon name="edit"></icon></el-tag> 编辑职位</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="user"></icon></el-tag> 查看用户</div>
                                    </div>
                                    <icon slot="reference" name="ask-fill" class="text-info-light"></icon>
                                </el-popover>
                            </template>
                            <template slot-scope="item">
                                <el-button-group class="r-button-group">
                                    <el-button size="medium"
                                               @click="dialogCompanyJobShow(item.row.id, item.$index)">
                                        <icon name="edit"></icon>
                                    </el-button>
                                    <el-button size="medium"
                                               @click="dialogCompanyUserShow(item.row.uid)">
                                        <icon name="user"></icon>
                                    </el-button>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 页码 -->
                    <div class="block-pagination text-center">
                        <el-pagination :total="total"
                                       :page-sizes="pagination.pageSizes"
                                       :page-size.sync="pagination.perPage"
                                       :current-page.sync="pagination.currentPage"
                                       @size-change="handlePageQuery"
                                       @current-change="handlePageQuery"
                                       background
                                       layout="sizes, prev, pager, next, jumper"></el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- from dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </div>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { namespace } from 'vuex-class'

import AuthBoxMixin from '@/mixins/cms/auth'
import baseMixin from '@/mixins/base'
import FunctionMixin from '@/mixins/function'
import PickerDateMixin from '@/mixins/picker-date'
import OptionsMixin from '@/mixins/options'
import CompanyMixin from '@/mixins/company'

import { errorMessage, successMessage } from '@/utils'

const module = namespace('cms/companyJob')

import CompanyUserShow from '@/views/cms/company/company-user/Show.vue'
import CompanyJobShow from '@/views/cms/company/company-job/Show.vue'

@Component({
  components: {
    CompanyUserShow,
    CompanyJobShow
  }
})
export default class Index extends mixins(
  AuthBoxMixin,
  baseMixin,
  FunctionMixin,
  PickerDateMixin,
  OptionsMixin,
  CompanyMixin) {
  // Vuex
  @module.State companyJobs!: Array<any>
  @module.State total!: number
  @module.Action index!: (payload: any) => Promise<any>
  @module.Action query!: (payload: any) => Promise<any>
  @module.Action show!: (payload: any) => Promise<any>

  // 操作组
  private operate: any = {
    loading: false,
    searchLoading: false
  }

  /*----- 钩子 -----*/
  public created() {
    if (!this.companyJobs.length) {
      this.getIndex()
    }
  }

  /**
   * 获取首页
   *
   * @return {Promise<any>}
   */
  private getIndex(): Promise<any> {
    this.table.loading = true
    return this.index({}).then((res) => {
      this.table.loading = false

      if (res.data.total === 0) {
        this.table.emptyText = '暂无数据'
      }

      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 获取查询
   *
   * @param {object} params
   * @return Promise<any>
   */
  private getQuery(params: any): Promise<any> {
    this.table.loading = true
    return this.query({params}).then((res) => {
      this.table.loading = false
      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 处理搜索
   *
   * @return {void}
   */
  private handleSearch(): void {
    this.operate.searchLoading = true
    const params = {
      ...this.search,
      per_page: this.pagination.perPage,
      page: 1
    }
    this.getQuery(params).then(() => {
      this.operate.searchLoading = false
    }).catch(() => {
      this.operate.searchLoading = false
    })
  }

  /**
   * 重新载入
   *
   * @return {void}
   */
  private handleReload(): void {
    this.params = {}
    this.search = {}
    this.initPagination()
    this.operate.loading = true
    this.getIndex().then((res) => {
      this.operate.loading = false
    }).catch((err) => {
      this.operate.loading = false
    })
  }

  /**
   * 处理查询
   *
   * @return {Promise<any>}
   */
  private handleQuery(): Promise<any> {
    this.table.loading = true
    const params = {
      ...this.search,
      ...this.params,
      per_page: this.pagination.perPage,
      page: 1
    }
    return this.getQuery(params).then((res) => {
      this.table.loading = false
      if (res.status === 200) {
        this.pagination.currentPage = res.data.current_page
      }
    }).catch(() => {
      this.table.loading = false
    })
  }

  /**
   * 处理分页
   *
   * @return {void}
   */
  private handlePageQuery(): void {
    this.table.loading = true
    const params = {
      ...this.params,
      per_page: this.pagination.perPage,
      page: this.pagination.currentPage
    }

    this.getQuery(params)
  }
}
</script>

<style scoped>

</style>